<!DOCTYPE html>
<!--This Project is not using any canvas pure HTML5-->
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
      #game-table td{
        height:100px;
        width:100px;
        background-color: blue;
        color:white;
        text-align: center;
      }
      #game-table td:hover{
        opacity: 0.5;
      }
      td.done{
        background-color: green !important;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var $timerDisplay = $("#timerDisplay");
        var timer;
        var cur = 0;
        var startTime;
        var elapsedTime;
        $('#game-table td').each(function() {

          var v = getRandomNonRepeating();

          $(this).click(function() {

            var c = parseInt($(this).text());
            if (c - 1 == cur) {
              cur = c;
              $(this).addClass('done');

              if (cur == 1) {
                startTime = new Date().getTime();
                timer = setInterval(function() {
                  elapsedTime = (new Date().getTime()) - startTime;
                  $timerDisplay.text(msToTime(elapsedTime));
                }, 50);
              }
              if (cur == 25) {
                clearInterval(timer);
              }
            }

          }).text(v);
        });
      });

      var randomNumbers = [];
      function getRandomNonRepeating() {
        var random = Math.floor(Math.random() * (25)) + 1;
        if (randomNumbers.indexOf(random) == -1) {
          randomNumbers.push(random);
          return random;
        } else {
          return getRandomNonRepeating();
        }
      }

      function msToTime(s) {
        var ms = s % 1000;
        s = (s - ms) / 1000;
        var secs = s % 60;
        s = (s - secs) / 60;
        var mins = s % 60;
        var hrs = (s - mins) / 60;

        return hrs + ':' + mins + ':' + secs + '.' + ms;
      }
    </script>
  </head>
  <body>
    <table id="game-table">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <div id="timerDisplay"></div>
  </body>
</html>